<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委托2</title>
    <style>
        ul li{
            float: left;
            list-style: none;
            width: 100px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            background-color: red;
            border: 1px solid black;
        }
        ul{
            width: 600px;
            height: 180px;
            background-color: blue;
        }

    </style>
</head>
<body>
<ul>
    <li id="box1">第一项</li>
    <li id="box2">第二项</li>
    <li id="box3">第三项</li>
</ul>
<script>
     //用事件委托，把li的点击事件委托给ul
     document.getElementsByTagName("ul")[0].onclick=function(event){
         //获取事件对象
         var event=event||window.event;
         //获取目标事件
         var tar=event.target;
         console.log(tar);
         //第一步先判断，点击的到底是li还是ul,如果是li才进行下一步操作
         if(tar.nodeName.toLowerCase()=="li"){
             //获取每个li的id
             console.log(tar.id);
             switch (tar.id){
                 case  "box1":
                     document.getElementById("box1").style.backgroundColor="gold";
                     break;
                 case  "box2":
                     document.getElementById("box2").style.fontSize="30px";
                     break;
                 case  "box3":
                     document.getElementById("box3").style.backgroundColor="green";
                     break;
             }
         }
     }
</script>
</body>
</html>